<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现的自动与手动均可切换的焦点图片轮换</title>
<!--新添加的样式-->
<link type="text/css" rel="stylesheet" href="css/city_public_style_0201.css" />
<style>
#areaOneAdFocus {
	width: 810px;
	height: 360px;
	float: left;
	top: 5px;
	left: 180px;
	overflow: hidden;
	position: relative;	
}
#areaOneAdFocus ul {
	height: 360px;
	position: absolute;
}
#areaOneAdFocus ul li {
	float: left;
	width: 810px;
	height: 360px;
	overflow: hidden;
	position: relative;
	background: #000;
}
#areaOneAdFocus ul li div {
	position: absolute;
	overflow: hidden;
}
#areaOneAdFocus .btnBg {
	position: absolute;
	width: 810px;
	height: 40px;
	left: 0;
	bottom: 0;
}
#areaOneAdFocus .btn {
	position: absolute;
	width: 790px;
	height: 25px;
	left: 0;
	bottom: 12px;
	padding-left: 10px;
	text-align: right;
	overflow: hidden
}
#areaOneAdFocus .btn span {
	display: inline-block;
	_display: inline;
	_zoom: 1;
	width: 25px;
	height: 25px;
	text-align: center;
	cursor: pointer;
	color: #888;
	font: 35px/25px Verdana, Geneva, sans-serif;
}
#areaOneAdFocus .btn span.on {
	color: #ec1a5b;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
</head>

<body>

<!--幻灯片和广告开始-->
<div id="areaOneAdFocus">
<ul>
  <li>
    <div style="left:0; top:0; width:810px; height:360px;">
      <a href="" target="_blank"><img src="images/810-360.jpg" width="810" height="360" /></a>
    </div>
  </li>
  <li>
  <div style="left: 0px; top: 0px; width: 500px; height: 360px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/lanzhi500x360.jpg" width="500" height="360" /></a>
  </div>
  <div style="right: 0px; bottom: 0px; width: 310px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/yulanyou_310x180_03.jpg" width="310" height="180" /></a>
  </div>
  <div style="right: 0px; top: 0px; width: 310px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/310x180.jpg" width="310" height="180" /></a>
  </div>
  </li>
  <li>
  <div style="left: 0px; top: 0px; width: 305px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/colif305x180.jpg" width="305" height="180" /></a>
  </div>
  <div style="left: 305px; top: 0px; width: 305px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/qban305x180.jpg" width="305" height="180" /></a>
  </div>
  <div style="left: 0px; top: 180px; width: 610px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/meifuxuetang610-180.jpg" width="610" height="180" /></a>
  </div>
  <div style="right: 0px; top: 0px; width: 200px; height: 360px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/caizhuang200x360.jpg" width="200" height="360" /></a>
  </div>
  </li>
  <li>
  <div style="left: 0px; top: 0px; width: 500px; height: 360px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/danzi500x360.jpg" width="500" height="360" /></a></div>
  <div style="right: 0px; top: 0px; width: 310px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/_310x180.jpg" width="310" height="180"/></a></div>
  <div style="right: 0px; bottom: 0px; width: 310px; height: 180px; opacity: 1;">
    <a href="" target="_blank">
    <img src="images/manxiuleidun_310x180.jpg" width="310" height="180" /></a>
  </div>
  </li>
  <li>
  <div style="left:0; top:0; width:810px; height:360px;">
    <a href="" target="_blank">
    <img src="images/5_810-360.jpg" width="810" height="360"/></a>
  </div>
  </li>
</ul>
</div>  
<!--幻灯片和广告结束-->

<script type="text/javascript">
$(function ()
{
  var sWidth = $("#areaOneAdFocus").width(); //获取焦点图的宽度（显示面积）
  var len = $("#areaOneAdFocus ul li").length; //获取焦点图个数
  var index = 0;
  var picTimer;

  //以下代码添加数字按钮和按钮后的半透明长条
  var btn = "<div class='btnBg'></div><div class='btn'>";
  for (var i = 0; i < len; i++)
  {
    btn += "<span>&bull;</span>";
  }
  btn += "</div>"
  $("#areaOneAdFocus").append(btn);
  $("#areaOneAdFocus .btnBg").css("opacity", 0.5);

  //为数字按钮添加鼠标滑入事件，以显示相应的内容
  $("#areaOneAdFocus .btn span").mouseenter(function ()
  {
    index = $("#areaOneAdFocus .btn span").index(this);
    showPics(index);
  }).eq(0).trigger("mouseenter");

  //图片为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
  $("#areaOneAdFocus ul").css("width", sWidth * (len + 1));

  //鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
  $("#areaOneAdFocus ul li div").hover(function (){
    $(this).siblings().css("opacity", 0.7);
  }, function (){
    $("#areaOneAdFocus ul li div").css("opacity", 1);
  });

  //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
  $("#areaOneAdFocus").hover(function (){
    clearInterval(picTimer);
  }, function (){
    picTimer = setInterval(function (){
      if (index == len){ //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
        showFirPic();
        index = 0;
      } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
        showPics(index);
      }
      index++;
    }, 3000); //此3000代表自动播放的间隔，单位：毫秒
  }).trigger("mouseleave");

  //显示图片函数，根据接收的index值显示相应的内容
  function showPics(index)
  { //普通切换
    var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
	//通过animate()调整ul元素滚动到计算出的position
    $("#areaOneAdFocus ul").stop(true, false).animate({ "left": nowLeft }, 500); 
	//为当前的按钮切换到选中的效果
    $("#areaOneAdFocus .btn span").removeClass("on").eq(index).addClass("on"); 
  }

  function showFirPic()
  { //最后一张图自动切换到第一张图时专用
    $("#areaOneAdFocus ul").append($("#areaOneAdFocus ul li:first").clone());
	//通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
    var nowLeft = -len * sWidth; 
    $("#areaOneAdFocus ul").stop(true, false)
	　.animate({ "left": nowLeft }, 500, function () {
      //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
      $("#areaOneAdFocus ul").css("left", "0");
      $("#areaOneAdFocus ul li:last").remove();
    });
    $("#areaOneAdFocus .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
  }
});
</script>
</body>
</html>
